<template>
    <!-- 新增和修改数据 -->
    <el-dialog draggable :fullscreen="fullscreen" v-model="dialogVisible" width="400" :before-close="handleClose">
        <template #header>
            <div class="dialog-title">
                <div class="left">
                    {{ isAdd==true ? '新增' : '编辑' }}
                </div>
                <div class="right">
                    <el-icon style="cursor:pointer;" @click="fullscreen = !fullscreen">
                        <CopyDocument v-if="fullscreen == true" />
                        <FullScreen v-else />
                    </el-icon>
                </div>
            </div>
        </template>
        <div>
            <el-form :model="editData" label-width="auto">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="归属单据">
                            <!-- <el-input v-model="editData.print_order_code" style="width: 100%;" /> -->
                            <el-select v-model="editData.print_order_code" placeholder="选择单据" style="width: 100%;">
                                <el-option v-for="item in props.printOrderList" :key="item.code" :label="item.name"
                                    :value="item.code" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="模板名称">
                            <el-input v-model="editData.name" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" plain @click="dialogSuerEv()">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, onActivated } from 'vue'
import { PrintTemplateListPost,PrintTemplatePkPut } from '@/api/setting/printCode/index.js'
import {
    FullScreen,
    CopyDocument
} from '@element-plus/icons-vue'
import { loadingStore } from '@/stores/index.js'

const props = defineProps({
    printOrderList: {
        type: Array,
        default: []
    }
})

const loading = loadingStore()
const emit = defineEmits(['emitGetDataEv'])
const isAdd = ref(true)
const editId = ref('')
const dialogVisible = ref(false)
const fullscreen = ref(false)
const editData = reactive({
    name: null,
    print_order_code: null,
    template: ''
})

onMounted(() => {

});
onActivated(() => {

})
const editInit = () => {
    Object.assign(editData, {
        name: '',
        print_order_code: '',
        template: ''
    })
}
const handleClose = (done) => {
    editInit()
    done()
}

// 新增
const dialogSuerEv = async () => {
    if( isAdd.value == true) {
        addEv()
    } else {
        editEv()
    }
}

const addEv = async () => {
    loading.loading = true
    try {

        let arr_data = await PrintTemplateListPost(editData)
        if (arr_data.status != 200) {
            return
        }
        ElMessage.success('新增成功')
        emit('emitGetDataEv', editData.name, editData.print_order_code)
        editInit()
        dialogVisible.value = false
    } catch (error) {
        ElMessage.error('新增接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 修改
const editEv = async () => {
    loading.loading = true
    try {
        console.log(editId)
        let arr_data = await PrintTemplatePkPut(editData,editId.value)
        if (arr_data.status != 200) {
            return
        }
        ElMessage.success('修改成功')
        emit('emitGetDataEv', editData.name, editData.print_order_code)
        dialogVisible.value = false
    } catch (error) {
        ElMessage.error('修改接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

defineExpose({
    dialogVisible,
    editId,
    isAdd,
    editData,
})

</script>

<style lang='less' scoped>
.dialog-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>